useState Hook

In this article, we will discuss about useState deeper in React.

We have created NewEmployee Component in our last article.

Our Employee Component is having one input element. Now lets say we want to have another input using which we can enter Employee Location.

We can repeat the same steps for Location as well.

Lets copy the paragraph tag and paste.

We can declare Multiple State Variables.

const [location,setLocation]=useState();

Lets display the entered location as well in the Paragraph tag.

<p>
        <label>Employee Location :
                <input type="text" name="Location" value={location}
                onChange={changeEmployeeLocation}></input>
        </label>
      </p>

Save the changes, navigate to the browser. We can see the output.

Now if we want to build an employee creation form where we will also have inputs for Employee Id and employee salary as well, the current way of creating the multiple state variables may not be the right approach.

State variables can hold objects and arrays just fine, so you can still group related data together.

Lets create an object and pass it to the useState function. The object will hold employee Id, name, location and Salary.

Lets create a function named as changeEmployee and with in this function we will call setEmployee function and we will update the state object.

We will use spread operator to pass the current employee object data and we will update the respective elements value.

Now we will update our input elements to use this objects data. Don’t forget to assign the name to each input element name. Save these changes. Navigate to the browser. We can see the output as we type in the data.

Lets save the changes, navigate to the browser. We can see the output.

import ReactDOM from "react-dom";
import React, { Component, useState } from "react";

function NewEmployee(){
  const [employee,setEmployeeData]=useState({Id:'',Name:'',Location:'',Salary:''});  
  
  function changeEmployeeInfo(e){
    setEmployeeData({...employee,[e.target.name]:e.target.value});
  }
  return(
    <div>
      <h2>Welcome to Employee Component...</h2>
      <p>
        <label>Employee ID :
                <input type="text" name="Id" value={employee.Id}
                onChange={changeEmployeeInfo}></input>
        </label>
      </p>
      <p>
        <label>Employee Name : 
                <input type="text" name="Name" value={employee.Name} 
                onChange={changeEmployeeInfo}></input>
        </label>
      </p>
      <p>
        <label>Employee Location :
                <input type="text" name="Location" value={employee.Location}
                onChange={changeEmployeeInfo}></input>
        </label>
      </p>
      <p>
        <label>Employee Salary : 
                <input type="text" name="Salary" value={employee.Salary}
                onChange={changeEmployeeInfo}></input>
        </label>
      </p>
      <p>
        Employee ID is : <b>{employee.Id}</b>, Name is : <b>{employee.Name}</b> ,
         Location is : <b>{employee.Location}</b> and Salary is : <b>{employee.Salary}</b>
      </p>
      <SalaryComponent salary={employee.Salary} onSalaryChange={changeEmployeeInfo}></SalaryComponent>
    </div>
  )
}

const element=<NewEmployee></NewEmployee>

ReactDOM.render(element,document.getElementById("root"));

We have seen how do we use state in a function component.

useState Hook

Video Reference